<template>
  <div class='container'>
    <el-row :gutter="gutter" :justify="justify" :align="align">
      <slot></slot>
    </el-row>
    <div class="core">
      <el-button type="primary" @click="handleOk">检索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
  </div>
  <div class="fill"></div>
</template>

<script setup lang="ts" name="BaseSearch">
let props = withDefaults(defineProps<{
  gutter?: number,
  justify?: string,
  align?: string,
  listUrl: string,
}>(), {
  gutter: 40,
  justify: 'start',
  align: 'top',
})

let emit = defineEmits(['ok', 'reset'])

function handleOk () {
  emit('ok', props.listUrl, 'search')
}

function handleReset () {
  emit('reset', '')
}

</script>

<style lang="less" scoped>
 .container {
  width: 100%;
  padding: 0px 24px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .el-row {
    flex: 1;
  }
  .core {
    padding: 0px 0px 18px 0px;
    margin-left: 24px;
  }
 }
 .fill {
  height: 24px;
  background-color: #f9f9f9;
 }
</style>
